<template>
  <div class="search-box">
    <el-input
      v-model="searchKeyword"
      :placeholder="props.placeholder"
      class="search-input"
    >
      <template #suffix>
        <el-popover
          placement="bottom"
          width="auto"
          trigger="click"
          :visible="timePickerVisible"
        >
          <template #reference>
            <el-icon
              :class="{
                'el-input__icon': true,
                'active-icon': hasSelectedTime,
              }"
              @click="toggleTimePicker"
            >
              <calendar />
            </el-icon>
          </template>
          <div class="time_picker_container">
            <div class="clear">
              <span class="clear_font" @click="clearTime">清空</span>
            </div>
            <el-date-picker
              v-model="selectedTimeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="large"
              value-format="YYYY-MM-DD"
              @change="handleTimeChange"
              class="time-picker"
            />
          </div>
        </el-popover>
      </template>
    </el-input>
    <el-button link @click="handleSearch" class="search-button" :icon="Search">
    </el-button>
  </div>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
const props = defineProps({
  placeholder: {
    type: String,
    default: "请输入搜索关键词",
  },
  searchCallBack: {
    type: Function,
    required: true,
    default: () => {},
  },
});
const searchKeyword = ref("");
const selectedTimeRange = ref([]);
const timePickerVisible = ref(false);
const hasSelectedTime = ref(false);

function toggleTimePicker() {
  timePickerVisible.value = !timePickerVisible.value;
}
function handleTimeChange(value) {
  hasSelectedTime.value = value.length > 0;
}
function closePop() {
  timePickerVisible.value = false;
}
function clearTime() {
  selectedTimeRange.value = [];
  hasSelectedTime.value = false;
  closePop();
}
function handleSearch() {
  // if (searchKeyword.value || selectedTimeRange.value.length > 0) {
    console.log("搜索关键词:", searchKeyword.value);
    console.log("时间范围:", selectedTimeRange.value);
    // if (selectedTimeRange.value.length > 0) {
    //   console.log(selectedTimeRange.value[0].getTime());
    // }
    const keyword = searchKeyword.value.trim() || null;
    const timeRange =
      selectedTimeRange.value.length > 0
        ? toRaw(selectedTimeRange.value)
        : null;
    // 这里可以使用 axios 或其他 HTTP 库发送请求
    props.searchCallBack(keyword, timeRange);
  // } else {
    // ElMessage({
    //   message: "请输入搜索关键词或选择时间范围",
    //   type: "warning",
    //   duration: 2000,
    // });
  // }
}
const reset = () => {
  searchKeyword.value = "";
  selectedTimeRange.value = [];
  hasSelectedTime.value = false;
};
defineExpose({
  reset,
});
watch(searchKeyword, (newValue) => {
  handleSearch()
});
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  .search-input {
    flex: 1;
    border-right: 1px solid #dcdfe6;
    :deep(.el-input__wrapper) {
      box-shadow: none;
    }
    .el-input__icon {
      cursor: pointer;
      font-size: 18px;
      &:hover {
        color: #409eff; /* Element Plus 主色调 */
      }
    }
  }
}
.time_picker_container {
  .clear {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px;
    .clear_font {
      color: #dcdfe6;
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
  }
}
.time-icon-button {
  cursor: pointer;
}
.active-icon {
  color: #409eff; /* Element Plus 主色调 */
}
// .time-picker-dialog {
//   margin-top: 10px;
// }
.search-button {
  height: 100%;
  width: 30px;
  // padding: 0 10px;
  :deep(.el-icon) {
    font-size: 17px;
  }
}
</style>
